<template>
  <div class>
    <el-tabs :tab-position="tabPosition" type="border-card">
      <el-tab-pane label="关联企业">
        <el-table :data="tableData1" border style="width: 100%" size="mini">
          <el-table-column align="center" width="30">
            <template slot="header">
              <el-button
                class="el-icon-circle-plus"
                style="padding:0"
                type="text"
                @click.prevent="addRow1()"
              ></el-button>
            </template>
            <template slot-scope="scope">
              <el-button
                type="text"
                style="padding:0"
                class="el-icon-remove"
                @click="handle1Delete(scope.$index, scope.row)"
              ></el-button>
            </template>
          </el-table-column>
          <el-table-column type="index" width="50" label="序号"></el-table-column>
          <el-table-column label="企业名称" align="center" min-width="300">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name" size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="所属行业" align="center" min-width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.industry" size="mini"></el-input>
            </template>
          </el-table-column>

          <el-table-column label="注册地址" align="center" min-width="500">
            <template slot-scope="scope">
              <el-input v-model="scope.row.registerAddress" size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="注册资本（万元）" align="center" min-width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.registerEdcapital" size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="额度（万元）" align="center" min-width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.quota" size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="关联关系" align="center" min-width="150">
            <template slot-scope="scope">
              <el-select v-model="scope.row.relations" size="mini">
                <el-option label="高管关联关系" value="1"></el-option>
                <el-option label="出资关联关系" value="2"></el-option>
                <el-option label="担保关联关系" value="3"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" min-width="300">
            <template slot-scope="scope">
              <el-input v-model="scope.row.remark" size="mini"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="上下游企业">
        <el-table :data="tableData2" border style="width: 100%" size="mini">
          <el-table-column align="center" width="30">
            <template slot="header">
              <el-button
                class="el-icon-circle-plus"
                style="padding:0"
                type="text"
                @click.prevent="addRow2()"
              ></el-button>
            </template>
            <template slot-scope="scope">
              <el-button
                type="text"
                style="padding:0"
                class="el-icon-remove"
                @click="handle2Delete(scope.$index, scope.row)"
              ></el-button>
            </template>
          </el-table-column>
          <el-table-column type="index" width="50" label="序号"></el-table-column>
          <el-table-column label="企业名称" align="center" prop="name" min-width="150"></el-table-column>
          <el-table-column label="所属行业" align="center" prop="industry" min-width="120"></el-table-column>
          <el-table-column label="法人代表" align="center" prop="legalRep" min-width="120"></el-table-column>
          <el-table-column label="合作关系" align="center"  min-width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.partnerShip==1">上游供应商</span>
              <span v-else>下游供应商</span>
            </template>
          </el-table-column>
          <el-table-column label="年销售/采购额(万元)" align="center" prop="salesSum" min-width="150"></el-table-column>
          <el-table-column label="占比%" align="center" min-width="80" prop="rate"></el-table-column>
          <el-table-column label="联系人" align="center" min-width="120" prop="linkman"></el-table-column>
          <el-table-column label="电话" align="center" prop="linkTel" min-width="120"></el-table-column>
          <el-table-column label="地址" align="center" prop="address" width="200"></el-table-column>
          <el-table-column label="备注" align="center" prop="remark" width="200"></el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="mini">查看</el-button>
              <el-button type="text" size="mini" @click="edit(scope.$index,scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="竞争对手">
        <el-table :data="tableData3" border style="width: 100%" size="mini">
          <el-table-column align="center" width="30">
            <template slot="header">
              <el-button
                class="el-icon-circle-plus"
                style="padding:0"
                type="text"
                @click.prevent="addRow3()"
              ></el-button>
            </template>
            <template slot-scope="scope">
              <el-button
                type="text"
                style="padding:0"
                class="el-icon-remove"
                @click="handle3Delete(scope.$index, scope.row)"
              ></el-button>
            </template>
          </el-table-column>
          <el-table-column type="index" width="50" label="序号"></el-table-column>

          <el-table-column label="企业名称" align="center" min-width="300">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name" size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="所在区域" align="center" min-width="300">
            <template slot-scope="scope">
              <el-input v-model="scope.row.area" size="mini"></el-input>
            </template>
          </el-table-column>

          <el-table-column label="行业地位" align="center" min-width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.industryStatus" size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="市场交集" align="center" min-width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.marketCommunication" size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="竞争关系" align="center" min-width="150">
            <template slot-scope="scope">
              <el-select v-model="scope.row.competeRelations" size="mini">
                <el-option label="竞争关系01" value="1"></el-option>
                <el-option label="竞争关系02" value="2"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="威胁程度" align="center" min-width="120">
            <template slot-scope="scope">
              <el-select v-model="scope.row.threat" size="mini">
                <el-option label="低" value="1"></el-option>
                <el-option label="中" value="2"></el-option>
                <el-option label="高" value="2"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" min-width="500">
            <template slot-scope="scope">
              <el-input v-model="scope.row.remark" size="mini"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <el-dialog width="70%" :title="sxyqyTitle" :visible.sync="dialogFormVisible">
      <el-form size="mini" inline :model="sxyqy" :rules="rules" ref="sxyqy" label-width="100px">
        <my-form-item label="企业名称" prop="name">
          <el-input v-model="sxyqy.name" autocomplete="off" :disabled="sxyqyDisabel"></el-input>
        </my-form-item>

        <my-form-item label="所属行业">
          <el-input v-model="sxyqy.industry" autocomplete="off" :disabled="sxyqyDisabel"></el-input>
        </my-form-item>

        <my-form-item label="法人代表">
          <el-input
            v-model="sxyqy.legalRep"
            autocomplete="off"
            :disabled="sxyqyDisabel"
            style="width: 200px;"
          ></el-input>
        </my-form-item>

        <my-form-item label="合作关系">
          <el-select v-model="sxyqy.partnerShip" style="width: 200px;">
            <el-option label="上游供应商" value="1"></el-option>
            <el-option label="下游客户" value="2"></el-option>
          </el-select>
        </my-form-item>
        <my-form-item label="年销售/采购额">
          <el-input
            v-model="sxyqy.salesSum"
            autocomplete="off"
            :disabled="sxyqyDisabel"
            style="width: 200px;"
          ><template slot="append">万元</template></el-input>
        </my-form-item>
        <my-form-item label="占比%">
          <el-input
            v-model="sxyqy.rate"
            autocomplete="off"
            :disabled="sxyqyDisabel"
            style="width:200px;"
          ></el-input>
        </my-form-item>
        <my-form-item label="联系人">
          <el-input
            v-model="sxyqy.linkman"
            autocomplete="off"
            :disabled="sxyqyDisabel"
            style="width:200px;"
          ></el-input>
        </my-form-item>
        <my-form-item label="联系电话">
          <el-input
            v-model="sxyqy.linkTel"
            autocomplete="off"
            :disabled="sxyqyDisabel"
            style="width:200px;"
          ></el-input>
        </my-form-item>
        <my-form-item label="住址">
          <el-input
            v-model="sxyqy.address"
            autocomplete="off"
            :disabled="sxyqyDisabel"
            style="width:800px;"
          ></el-input>
        </my-form-item>
        <my-form-item label="备注">
          <el-input
            v-model="sxyqy.remark"
            type="textarea"
            autocomplete="off"
            style="width:800px;"
            :disabled="sxyqyDisabel"
          ></el-input>
        </my-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button :disabled="sxyqyDisabel" type="primary" @click="handleAdd()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {
  },
  data() {
    return {
      sxyqyTitle: "新增上下游企业信息",
      dialogFormVisible: false,
      sxyqyDisabel: false,
      sxyqyEdit: false,//用于判断上下游企业信息是否属于修改还是新增
      sxyqyIndex: 0,//记录上下游企业信息修改行号
      tabPosition: 'right',
      tableData1: [],
      sxyqy: {},
      tableData2: [],
      tableData3: [],
      rules: {
        peoName: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        ideCard: [
          { required: true, message: '证件号码不能为空', trigger: 'blur' }
        ],
        telephone: [
          { pattern: /^(13[0-9]|14[0-9]|15[0-9]|166|17[0-9]|18[0-9]|19[8|9])\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
      }
    };
  },
  computed: {},
  mounted() { },
  methods: {
    //企业人员表单窗口取消操作
    cancle() {
      this.sxyqy = {};
      this.dialogFormVisible = false;
    },
    //修改企业人员信息
    edit(index, row) {
      this.sxyqy = row;
      this.sxyqyEdit = true;
      this.sxyqyIndex = index;
      this.dialogFormVisible = true;
      this.sxyqyTitle = "修改上下游企业信息";
      this.sxyqyDisabel = false;
    },
    //查看企业人员明细信息
    handleClick(row) {
      this.sxyqy = row;
      this.dialogFormVisible = true;
      this.sxyqyTitle = "上下游企业详细信息";
      this.sxyqyDisabel = true;
    },
    //新增企业人员表单确认
    handleAdd() {
      if (this.sxyqyEdit) {//判断是否属于修改，是修改先删除之前的数据再添加
        this.tableData2.splice(this.sxyqyIndex, 1);
        this.sxyqyEdit = false;
      }
      this.tableData2.unshift(this.sxyqy);
      this.cancle();
    },
    //获取关联企业信息
    getglqy() {
      return this.tableData1;
    },
    //获取上下游企业信息
    getsxyqy() {
      return this.tableData2;
    },
    //获取竞争对手信息
    getjzds() {
      return this.tableData3;
    },
    getData(entId){
      this.$api.formPost( '/api/biz/entRelation/doGetList',{
        entId
      }).then(res => {
        console.log(res)
            if(res.retHead.code=="0000000"){
                // this.ruleForm = res.retBody;
                let persons = res.retBody.list;
          for (var i = 0; i < persons.length; i++) {
            if (persons[i].relType == '1') {
              this.tableData1.push(persons[i]);
            } else if(persons[i].relType == '2') {
              this.tableData2.push(persons[i]);
            }else if(persons[i].relType == '3'){
              this.tableData3.push(persons[i]);
            }
          }
            }else{
                this.$message({
                    type: 'error',
                    message: res.retHead.message
                });
            }
        });
    },
    doSave(id,path,name) {
      let that = this;
      return new Promise((resolve, reject) => {
        that.$api
          .post("/api/biz/entRelation/doSubmit", { sxyqyList: that.tableData2,jzdsList: that.tableData3,glqyList: that.tableData1,entId:id,applicationPath:path,componentName:name})
          .then(res => {
            if (res.retHead.code == "0000000") {
              // that.$message.success(res.retHead.message);
              resolve(res.retBody);
            } else {
              that.$message.error(res.retHead.message);
            }
          });
      });
    },
    // 增加行
    addRow1() {
      var list = {
        relType: '1',
      }
      this.tableData1.unshift(list)
    },
    addRow2() {
      this.dialogFormVisible=true;
      this.sxyqyTitle="新增上下游企业信息";
      this.sxyqyDisabel=false;
      this.sxyqy.relType="2";
    },
    addRow3() {
      var list = {
        relType: '3',
      }
      this.tableData3.unshift(list)
    },
    handle1Delete(index, row) {
      this.tableData1.splice(index, 1);
    },
    handle2Delete(index, row) {
      this.tableData2.splice(index, 1);
    },
    handle3Delete(index, row) {
      this.tableData3.splice(index, 1);
    }
  },
  created() { }
};
</script>
<style lang='scss' scoped>
</style>